<template>
	<div>
		<cl-crud @load="onLoad">
			<template #slot-channel>
				<div class="channel">渠道范围：{{ channel }}</div>
			</template>
			<template #table-column-link="{scope}">
				<a href="scope.row.link">{{ scope.row.link }}</a>
			</template>

			<cl-form ref="cl-form"></cl-form>
		</cl-crud>
	</div>
</template>

<script>
import platform from '@/mixin/platform';

export default {
	data() {
		return {
			crud: null,
			channel: ''
		};
	},
	mixins: [platform],
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.crm.bwbtChannel)
				.set('table', {
					columns: [
						{
							label: '渠道标识',
							prop: 'channelId',
							align: 'center'
						},
						{
							label: '链接',
							prop: 'link',
							align: 'center',
							width: 200
						},
						{
							label: '备注',
							prop: 'remark',
							align: 'center'
						}
					],

					op: {
						layout: ['edit', 'delete']
					}
				})
				.set('upsert', {
					props: {
						labelWidth: '112px',
						center: true,
						'custom-class': 'custom-class-dialog-mini'
					},
					items: [
						{
							label: '渠道标识',
							prop: 'channelId',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入渠道标识'
								}
							},
							rules: {
								required: true,
								message: '请输入渠道标识'
							}
						},
						{
							label: '链接',
							prop: 'link',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入链接'
								}
							},
							rules: {
								required: true,
								message: '请输入链接'
							}
						},
						{
							label: '备注',
							prop: 'remark',
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入备注'
								}
							}
						}
					]
				})
				.set('layout', [
					['refresh-btn', 'add-btn', 'slot-channel', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					let { channel } = await next(params);
					console.log(channel);
					this.channel = channel;
				})
				.done();

			app.refresh();
		}
	}
};
</script>
<style scoped>
.channel {
	font-size: 14px;
    margin-left: 20px;
    display: flex;
    align-items: center;
}
</style>
